<template>
  <view>
    <view
      class="assess-container flex-row justify-between items-center"
      @click="bindClick"
    >
      <view class="flex-row items-center">
        <image class="assess-image" :src="item.img_src"></image>
        <view class="flex-col items-start justify-between group_4">
          <text class="font_2 text_5">{{ item.title }}</text>
          <text class="font_3 mt-20">预计时长：{{ item.time }}分钟</text>
        </view>
      </view>
      <image
        class="flex-col right-icon"
        :src="done ? '/static/icon/tick_pink.svg' : '/static/icon/towards.svg'"
      />
    </view>
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog
        cancelText="否"
        confirmText="是"
        title="注意"
        content="问卷已完成，需要重新进行评估？"
        @confirm="clearAndAssess"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
export default {
  name: "AssessCard",
  components: {},
  props: {
    item: {
      type: Object,
    },
    done: {
      type: Boolean,
    },
  },
  data() {
    return {};
  },
  emits: ["clearAssess", "finishAssess"],
  computed: {},
  methods: {
    bindClick() {
      if (this.done) {
        this.$refs.alertDialog.open();
      } else {
        this.toAssess();
      }
    },
    clearAndAssess() {
      // clear assess result
      this.$emit("clearAssess", { id: this.item.id });
      this.$storage.remove(`ans_${this.item.name}`);
      this.toAssess();
    },
    toAssess() {
      uni.navigateTo({
        url: `../../pages/survey/survey?ques=${this.item.name}`,
        events: {
          updateAssessRes: (res) => {
            // res = {id, result: Array}, details = 问卷详情
            this.$emit("finishAssess", { id: this.item.id, result: res.result, details: res.details });
          },
        },
      });
    },
  },
};
</script>

<style scoped lang="css">
.list-item {
  padding: 24rpx 32rpx;
  background-color: #ffffff;
  border-radius: 24rpx;
}
.list-item:first-child {
  margin-top: 0;
}

.right-icon {
  width: 48rpx;
  height: 48rpx;
}
.image_8 {
  width: 76rpx;
  height: 76rpx;
}
.pos {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.pos_2 {
  position: absolute;
  right: 0;
  bottom: 0;
}
.group_4 {
  margin-left: 30.36rpx;
}
.font_2 {
  font-size: 32rpx;
  font-family: Microsoft YaHei UI;
  line-height: 30.84rpx;
  font-weight: 700;
  color: #000000;
}
.text_5 {
  line-height: 32.18rpx;
}
.font_3 {
  font-size: 20rpx;
  font-family: Microsoft YaHei UI;
  line-height: 19.54rpx;
  color: #000000;
}
.image_9 {
  margin-left: 69.1rpx;
}

.assess-image {
  width: 100rpx;
  height: 100rpx;
}
.assess-container {
  padding: 24rpx 32rpx;
  background-color: #ffffff;
  border-radius: 24rpx;
}
</style>